<!doctype html>
<html lang="en">
 <head>
   <link rel="stylesheet" href="ol.css" type="text/css">
   <style>
     .map {
       height: 100%;
       width: 100%;
     }
   </style>
   <script src="ol.js" type="text/javascript"></script>
   <script src="dbf.js" type="text/javascript"></script>
   <title>OpenLayers example</title>
 </head>
 <body>
   <h2>My Map</h2>
   <div id="map" class="map"></div>
   <script type="text/javascript">

    mydbf = new DBF("guangzhou_proj.dbf",function(data){
      console.log(data)
    });

     var map = new ol.Map({
       controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({})
            ]),
       target: 'map',
       layers: [
         new ol.layer.Tile({
           source: new ol.source.OSM()
         })
       ],
       view: new ol.View({
         center: ol.proj.fromLonLat([113.48903700038623,23.41481103040963]),
         maxZoom: 19,
         zoom: 6
       }),
       logo: false
     });

     geoVectorLayer = new ol.layer.Vector({
      title:"guangzhou_proj",
      source:new ol.source.Vector({
        url: './guangzhou_proj.json',
        format:new ol.format.GeoJSON()
      })
     })

     map.addLayer(geoVectorLayer);
   </script>
 </body>
</html>